<template>
  <div class="top">
    <!-- 导航条 -->
    <div class="content" :style="{ backgroundColor:background}">
      <div  @click="sendToParent"  :style="{margin:margin}">首页</div>
      <div  @click="sendToParent" :style="{margin:margin}">联系我们</div>
      <div  @click="sendToParent" :style="{margin:margin}">产品</div>
      <div  @click="sendToParent" :style="{margin:margin}">公司概览</div>
      <div  @click="sendToParent" :style="{margin:margin}">传值</div>
      <div  @click="sendToParent" :style="{margin:margin}">简介</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Top",
  props: {
    background:null,
    margin:null
  },
  methods: {
    sendToParent(event) {
      // 使用$emit触发事件，并传递数据
      this.$emit('from-child', event.target.innerText);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content{
    display:flex;
    justify-content: center;
    align-items: center;
    padding:10px;
    background-color: black;
    height: 5vh;
}
.content>div{
    color:white;
    background-color: black;
    padding:5px;
    cursor:pointer;
}
</style>